<template>
  <div class="container">

    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="咨询师名称">
          <el-input v-model="queryInfo.name" placeholder="请输入咨询师信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="toAddConsult">新增咨询师信息</el-button>
         
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="ConsultList" border style="width: 100%">
    
      <el-table-column prop="id" label="咨询师编号"></el-table-column>
      <el-table-column prop="name" label="咨询师姓名">
      </el-table-column>
      <el-table-column prop="sex" label="咨询师性别">
      </el-table-column>
	  <el-table-column prop="consultlevel.name" label="咨询师等级">
	  </el-table-column>
      <!-- <el-table-column prop="img" label="图片名">
      </el-table-column> -->
	  <el-table-column prop="img" label="咨询师头像">
	   <template slot-scope='scope'> 
	  	<el-image style="width: 100px; height: 100px" 	:src="'http://10.10.18.137:8888/sfzy/downLoad?filename='+scope.row.img"
	  	></el-image>
	  </template>
	  </el-table-column>
	  
	  
	  <el-table-column prop="address" label="地址">
	  </el-table-column>
	  <el-table-column prop="intro" label="个人介绍">
	  </el-table-column>
	 <el-table-column prop="authentication" label="是否认证">
	   <template slot-scope="scope">
	     <div v-if="scope.row.authentication === 0">已认证</div>
	     <div v-else-if="scope.row.authentication === 1">未认证</div>
	   </template>
	 </el-table-column>

	  <el-table-column prop="book" label="证书图片">
	   <template slot-scope='scope'> 
	  	<el-image style="width: 100px; height: 100px" 	:src="'http://10.10.18.137:8888/sfzy/downLoad?filename='+scope.row.img"
	  	></el-image>
	  </template>
	  </el-table-column>
	<!--  <el-table-column prop="specialties"  label="咨询师擅长领域">
		<el-button type="text" @click="specialtiesdialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
	  </el-table-column> -->
	
	  
     
      
     <el-table-column label="操作" width="300px">
     	<template slot-scope='scope'>
			<el-link type="primary" @click="specialtiemethod(scope.row.id)">查看擅长领域</el-link>
     		<el-link type="primary" @click="toEditConsult(scope.row)">编辑</el-link>
     	<el-link type="primary" @click="deleteConsult(scope.row.id)">删除</el-link>
     	</template>
     </el-table-column>
	 
	 
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryInfo.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
	
	<!-- 擅长领域对话框 -->
	<el-dialog title="擅长领域" :visible.sync="specialtiesdialogTableVisible">
	  <el-table :data="specialtiesList">
	    <el-table-column prop="name" label="擅长领域" width="150"></el-table-column>
	
	    <el-table-column  label="操作" width="150">
			<template slot-scope='scope'>
				
				
			<el-link type="primary" @click="deleteConsult(scope.row.id)">{{scope.row.id}}删除</el-link>
			</template>
			
		</el-table-column>
	  </el-table>
	  
	  <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
	                 :current-page="queryInfo1.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo1.pageSize"
	                 layout="total, sizes, prev, pager, next, jumper" :total="total1">
	  </el-pagination>
	  
	</el-dialog>
	
	
    <!-- 新增和修改的对话框 -->
    <!-- dialog中绑定close事件，实现对话框右上角叉号的取消功能 -->
	
	
	
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="cancle">
      <el-form :model="Consult">
        <el-form-item label="姓名" label-width="80px">
          <el-input placeholder="姓名" v-model="Consult.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="80px">
        <!--  <el-input placeholder="请输入性别" v-model="Consult.sex"></el-input> -->
		<el-select v-model="Consult.sex" filterable placeholder="请选择">
		    <el-option
		      v-for="item in xingbie"
		      :key="item.name"
		      :label="item.name"
		      :value="item.name">
		    </el-option>
		  </el-select>
		
        </el-form-item>
		<el-form-item label="等级" label-width="80px">
		 <!-- <el-input placeholder="等级" v-model="Consult.levelId"></el-input> -->
		 <el-select v-model="Consult.levelId" filterable placeholder="请选择">
		     <el-option
		       v-for="item in ConsultlevelList"
		       :key="item.id"
		       :label="item.name"
		       :value="item.id">
		     </el-option>
		   </el-select>
		 
		 
		</el-form-item>
		

       <!-- <el-form-item label="图片名" label-width="80px">
          <el-input placeholder="图片名" v-model="Consult.img"></el-input>
        </el-form-item> -->
<el-form-item label="头像" label-width="80px">
	<!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
	<!-- 
		 el-upload:上传组件
			action： 上传网址
			list-type：上传组件类型
			on-preview ： 图片预览事件
			on-remove ：移除图片事件
			el-dialog : 预览图片组件
			on-success : 上传成功后的回调函数
			limit  ： 限制上传图片个数
	-->
	<el-upload action="http://10.10.18.137:8888/sfzy/upload" list-type="picture-card"  :on-success="handleSuccess" :file-list="fileList" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
	<i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="dialogVisible">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
</el-form-item>

 <el-form-item label="地址" label-width="80px">
          <el-input placeholder="地址" v-model="Consult.address"></el-input>
        </el-form-item>
		<el-form-item label="个人介绍" label-width="80px">
		  <el-input placeholder="个人介绍" v-model="Consult.intro"></el-input>
		</el-form-item>
		<el-form-item label="是否认证" label-width="80px">
		  <!-- <el-input placeholder="是否认证" v-model="Consult.authentication"></el-input> -->
		  <el-select v-model="Consult.authentication" filterable placeholder="请选择">
		      <el-option
		        v-for="item in renzhenglist"
		        :key="item.id"
		        :label="item.name"
		        :value="item.id">
		      </el-option>
		    </el-select>
		  
		  
		  
		</el-form-item>

<el-form-item label="认证图片" label-width="80px">
	<!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
	<!-- 
		 el-upload:上传组件
			action： 上传网址
			list-type：上传组件类型
			on-preview ： 图片预览事件
			on-remove ：移除图片事件
			el-dialog : 预览图片组件
			on-success : 上传成功后的回调函数
			limit  ： 限制上传图片个数
	-->
	<el-upload action="http://10.10.18.137:8888/sfzy/upload" list-type="picture-card"  :on-success="handleSuccess" :file-list="fileList" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
	<i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="dialogVisible">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
</el-form-item>

     
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addConsult">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
		
		specialtiesList:'',
		specialtiesdialogTableVisible:false,
		
      // 查询信息对象
      queryInfo: {
        name: '',
        pageNum: 1,
        pageSize: 2
      },
	  queryInfo1:{
		  id: '',
		  pageNum: 1,
		  pageSize: 2
	  },
	  total1:0,
      total: 0,
      ConsultList: [],
	  ConsultList1: [],
	  ConsultListbyid:[],
      title: '添加', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
     Consult: {
        // 文章对象
        "id":'',
        "name": "",
        "sex": "",
        "levelId": "",
        "img": "",
		"address":"",
		"intro":"",
		"authentication":"",
		"book":""
       
      },
	  // ----------需要定义的数据------------
	  dialogImageUrl: '', // 预览图片路径
	  dialogVisible: false ,// 预览图片的对话框
	fileList:[],
	ConsultlevelList:'',
	Specialty:'',
	renzhenglist:[{id:0,name:'认证'},{id:1,name:'未认证'}],
	xingbie:[{name:'男'},{name:'女'}]
	 
    }
  },
  methods: {
	  
	  queryList1() {
	    console.log(this.queryInfo);
	    // 调用后端接口来获取数据
	    this.$http.get('ConsultController/findById', {
	      params: this.queryInfo1
	    })
	        .then(resp => {
	          if (resp.data.status == 200) {
	  			
	            console.log(resp.data)
	            this.ConsultList1 = resp.data.data.list;
	            this.total1 = resp.data.data.total;
				this.specialtiesList=resp.data.data.list[0].specialties
				console.log(this.total1)
	          
	          } else {
	            this.$message.error('查询失败！')
	          }
	        })
	  },
	  
	  specialtiemethod(id){
		  this.queryInfo1.id=id
		  this.specialtiesdialogTableVisible=true
		 this.queryList1   
	  },
	
	  
	  queryConsultlevelList() {
	   
	    this.$http.get('ConsultlevelController/findAll').then(resp => {
			if(resp.data.status==200){
				this.ConsultlevelList=resp.data.data
				this.$message.success(resp.data.message)
			}else{
				this.$message.error()
			}
			
	        })
			
	  },
	
	  
	  // 处理上传成功的函数
	  handleSuccess(response){
	  	// 把上传后的图片路径，交给文章对象的tabularChart
	  	this.Consult.img = response.message;
			this.Consult.book = response.message;
		
	  },
	      
	  // 删除图片的事件
	  handleRemove(file, fileList) {
	  	console.log(file, fileList);
	  	// 移除数据
	  	this.Consult.img ='';
		this.Consult.book ='';
	  },
	      
	  // 预览图片事件
	  handlePictureCardPreview(file) {
	  	this.dialogImageUrl = file.url;
	  	this.dialogVisible = true;
	  },
	  
	  
	  deleteConsult(id){
		   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		       confirmButtonText: '确定',
		       cancelButtonText: '取消',
		       type: 'warning'
		    })
		    .then(() => {
		
		        this.$http.get('ConsultController/deleteByPrimaryKey'+'?id='+id )
		            .then(resp => {
		            if (resp.data.status == 200) {
		               this.$message.success(resp.data.message)
		                this.queryList
		             } else {
		               this.$message.error(resp.data.message)
		              }
		             })
		         })
		          .catch(() => {
		            this.$message({
		              type: 'info',
		              message: '已取消删除'
		            })
		          })
	  },
	  
	  
    // 添加文章
    addConsult() {
     if (this.Consult.id) { // 有值为true  修改
     		this.$http.post("ConsultController/updateByPrimaryKey", this.Consult)
     		.then(resp => {
     			if (resp.data.status == 200) {
     			// 消息提示
     			this.$message.success('修改成功！');
     			// 清空数据
     			this.Consult = { // 文章对象
     				// 文章对象
     				"id":'',
     				"name": "",
     				"sex": "",
     				"levelId": "",
     				"img": "",
     				"address":"",
     				"intro":"",
     				"authentication":"",
     				"book":""
     				}
     				// 关闭对话框
     				this.dialogFormVisible = false;
     				// 重新查询
     				this.queryList()
     		} else {
     				this.$message.error('接口异常！')
     				}
     		})
     
           }else {
        this.$http.post("ConsultController/insert", this.Consult)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('添加成功！');
                // 清空数据
                this.Consult = {
              // 文章对象
              "id":'',
              "name": "",
              "sex": "",
              "levelId": "",
              "img": "",
              "address":"",
              "intro":"",
              "authentication":"",
              "book":""
                }
                // 关闭对话框
                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })
      }
	  	fileList:[]
    },
    /// 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.Consult = {
        // 文章对象
        "id":'',
        "name": "",
        "Consultintroduce": "",
        "tabularchart": "",
        "details": "",
        "readquantity": 0,
        "collects": 0,
        "teacherId": 1,
        "typeId": 1,
      }
    },
    search(){
      this.queryInfo.pageNum=1;
      this.queryList();
    },
    // 进入添加的对话框
    toAddConsult() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
    },
	// 第一个
    handleSizeChange(size) {
      this.queryInfo.pageSize=size;
      console.log("size"+size)

      this.queryList();
    },
	// 第二个
	handleSizeChange1(size) {
	  this.queryInfo1.pageSize=size;
	  console.log("size"+size)
	
	  this.queryList1();
	},
	// 第一个
    handleCurrentChange(num) {
      this.queryInfo.pageNum=num;
      console.log('num:'+num)

      this.queryList();
    },
	// 第二个
	handleCurrentChange1(num) {
	  this.queryInfo1.pageNum=num;
	  console.log('num:'+num)
	
	  this.queryList1();
	},
    // 分页查询信息的方法
    queryList() {
    
      // 调用后端接口来获取数据
      this.$http.get('ConsultController/getConsultList2', {
        params: this.queryInfo
      })
          .then(resp => {
            if (resp.data.status == 200) {
				
            
              this.ConsultList = resp.data.data.list;
              this.total = resp.data.data.total;
            
            } else {
              this.$message.error('查询失败！')
            }
          })
    },
	// 进入修改的预览数据页面
	toEditConsult(row) {
		//console.log(row)
		// 赋值
		this.Consult = row;
		// 设置标题
		this.title = "修改";
		// 开启对话框
		this.dialogFormVisible = true;
		this.fileList=[{
				name:row.img,
				url:'http://10.10.18.137:8888/sfzy/downLoad?filename='+row.img
				}];
	
	}
  },
  mounted() {
    this.queryList();
	this.queryConsultlevelList()
  }
}
</script>
<style>
	/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
	.ql-container{
		min-height: 200px;
	}
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}
</style>